<template>
  <div class="main">
    <el-container>
      <el-aside width="200px" style="background-color: #fff; padding: 0">

        <el-input style="margin-bottom: 10px;margin-top: 20px"
                  placeholder="输入类别名称进行过滤"
                  v-model="filterText">
        </el-input>

        <el-tree
          class="filter-tree"
          :data="materialTypeList"
          :props="{label:'name'}"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="getMaterialByType"
          ref="tree">
        </el-tree>

      </el-aside>
      <el-main style="padding: 0px">
          <fcTable
            ref="table"
            :columes="columes"
            :selection="false"
            :url="this.list"
            :deletUrl="universalUrl"
          >
            <!-- 表上头按钮插槽 -->
            <template v-slot:button>
              <el-button
                icon="el-icon-circle-plus-outline"
                type="primary"
                v-hasPermi="['system']"
                @click="add()"
              >新增
              </el-button
              >
            </template>

            <!-- 表格行插槽 -->
            <template #sizeLength="scope">
          <span>
            {{ scope.row.sizeLength }} x {{ scope.row.sizeWidth }} x
            {{ scope.row.sizeHeight }}</span
          >
            </template>
            <template #status="scope">
              <el-tag :type="scope.row.status === 1001 ? 'primary' : 'warning'">{{
                scope.row.statusText
                }}
              </el-tag>
            </template>
            <template #operation="scope">
              <el-link type="primary" style="margin-right: 5px" @click="edit(scope.row)">编辑</el-link>
            </template>
          </fcTable>
      </el-main>
    </el-container>
    <div>
      <materialAdd
        :title="title"
        :visible.sync="visible"
        :item="element"
        @Ok="addAndEdit"
      ></materialAdd>
    </div>
  </div>
</template>
<script>
  import request from "@/utils/request";
  import fcTable from "@/components/futureCloudMOM/fcTable";
  import materialAdd from "./materialAdd";
  import {getListByTree} from "../basic_materialType/materialType"

  export default {
    name: "BasicMaterial",
    components: {
      fcTable,
      materialAdd
    },
    data() {
      return {
        columes: [
          // {
          //   label: "缩略图",
          //   key: "thumbnail",
          //   visible: true,
          //   search: true,
          // },
          {
            label: "物料名称",
            key: "name",
            visible: true,
          },
          {
            label: "物料编码",
            key: "code",
            visible: true,
          },
          {
            label: "物料类型",
            key: "materialTypeID",
            visible: false,
            search: true,
            table: "Basic_MaterialType",
          },
          {
            label: "型号",
            key: "model",
            visible: true,
          },
          {
            label: "规格",
            key: "specification",
            visible: true,
          },
          {
            label: "长x宽x高",
            key: "sizeLength",
            type: "slot",
            visible: true,
          },
          {
            label: "图号",
            key: "figureNumber",
            visible: true,
          },
          {
            label: "状态",
            key: "status",
            visible: true,
            type: "slot",
            dictCode: "material_status",
          },
          {
            label: "备注",
            key: "remark",
            visible: true,
          },
          // {
          //   label: "创建人",
          //   key: "sysCreateUser",
          //   visible: true,
          // },
          // {
          //   label: "创建时间",
          //   key: "sysCreateTime",
          //   visible: true,
          //   sortable: true,
          // },
          {
            label: "操作",
            key: "operation",
            delete: true,
            //插槽需要的属性
            type: "slot",
            //element-ui自带的属性 参考文档写 都可用
            fixed: "right",
            //显隐列需要的属性
            visible: true,
            //显隐禁选中
            disabled: true,
            search: true,
            width: 200
          },
        ],
        //新增/编辑弹窗打开的标题
        title: "",
        //显隐
        visible: false,
        //数据
        element: {},
        //列表页
        list: "basic/material/getList",
        //新增 修改 删除
        universalUrl: "basic/material",


        /**
         * 左侧物料类型树形
         */
        // 物料类型数据
        materialTypeList:[],
        // 请求参数
        materialType:{
          name:""
        },
        page:{
          pageSize:1000,
          pageNum:1
        },
        // 数据过滤值
        filterText:"",


      };
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      // 左侧数据获取
      this.getMaterialTypeList();
    },

    methods: {
      add() {
        this.element = null;
        this.title = "新增";
        this.visible = true;
      },
      edit(item) {
        console.log(item);
        this.element = item;
        this.title = "编辑";
        this.visible = true;
      },
      addAndEdit(item) {
        console.log(item);
        let method = "put";
        if (this.title === "新增") {
          method = "post";
        }
        request({
          url: this.universalUrl,
          method: method,
          data: item,
        }).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.$refs.table.getList();
            this.visible = false;
          } else {
            this.$message.error(res.message);
          }
        });
      },


      /**
       * 左侧树形
       */
      // 数据获取
      getMaterialTypeList(){
        getListByTree(this.materialType,this.page).then(res =>{
          if(res.code === 200){
            this.materialTypeList = res.rows;
          }else{
            this.$message.error("左侧数据获取异常！！！");
          }
        })
      },
      // 数据过滤
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      // 根据类型删选物料数据
      getMaterialByType(data){
        if(!data.children){
          let join = {
            propertyName: "materialTypeID",
            jojntType: "eq",
            price: data.id,
          };
         var index = this.$refs.table.list.findIndex(item => item.propertyName === "materialTypeID")
          if(index === -1){
            this.$refs.table.list.push(join);
          }else{
            this.$refs.table.list[index].price = data.id;
          }
          this.$refs.table.getList();
        }
      }



    },
  };
</script>
<style scoped>
  .main {
  }
</style>
